define(function() {
    'use strict';
    function Fd(options){
        // 获取元素
        this.sBox = options.sBox;
        this.bBox = options.bBox;
        this.span = options.span;
        this.bImg = options.bImg;
        this.addEvent() ;
    }
    // 绑定事件
    Fd.prototype.addEvent = function(){
         var that = this ;
    
        this.sBox.onmouseover = function(){
            that.show()
        }
        this.sBox.onmouseout = function(){
            that.hid();
        }
        this.sBox.onmousemove = function(eve){
            var e = eve || window.event ;
            that.move (e) ;
        }
    }
    Fd.prototype.show = function(){
        
        this.span.style.display = "block" ;
        this.bBox.style.display = "block " ;
    
    
        this.span.style.width = (this.bBox.offsetWidth / this.bImg.offsetWidth) * this.sBox.offsetWidth + "px" ;
    
        this.span.style.height = (this.bBox.offsetHeight / this.bImg.offsetHeight) * this.sBox.offsetHeight+ "px" ;
    
         // 提前获取各种尺寸，方便使用
        this.sBoxW = this.sBox.offsetWidth;
        this.sBoxH = this.sBox.offsetHeight;
        this.sBoxL = this.sBox.offsetLeft;
        this.sBoxT = this.sBox.offsetTop;
        this.spanW = this.span.offsetWidth;
        this.spanH = this.span.offsetHeight;
        this.bBoxW = this.bBox.offsetWidth;
        this.bBoxH = this.bBox.offsetHeight;
        this.bImgW = this.bImg.offsetWidth;
        this.bImgH = this.bImg.offsetHeight;
    
    }
    
    
    Fd.prototype.hid = function(){
        
        this.span.style.display = "none" ;
        this.bBox.style.display = "none " ;
    }
    Fd.prototype.move = function(e){
    
        var l = e.pageX - this.sBoxL - this.spanW /2 ;
        var t = e.pageY - this.sBoxT - this.spanH / 2 ;
        // alert(e.clientY +'-'+ this.sBoxT +'-'+ this.spanH)
        // 边界判定
    
        if(l<0) l=0 ;
        if(t<0) t=0  ; 
        if(l>this.sBoxW-this.spanW)  l = this.sBoxW-this.spanW  ;
        if(t>this.sBoxH-this.spanH)  t = this.sBoxH-this.spanH  ;
    
        // console.log(l) ;
        // console.log(t) ;
        this.span.style.left = l + "px" ;
        this.span.style.top = t + "px" ;
    
        var x = l/ (this.sBoxW - this.spanW) ;
        var y = t / (this.sBoxH - this.spanH ) ;
    
       this.bImg.style.left = x * -Math.abs( this.bImgW -this.bBoxW)  + "px"
       this.bImg.style.top = y * -Math.abs(this.bImgH -this.bBoxH)  + "px"
    
    }
    return Fd
});